<template>
    <div class="home" ref="home">
      <div class="img-tab">
        <el-carousel ref="bannerCarousel" :interval="3000" arrow="always" @change="calcDivHeight" :height="carouselHeight" :autoplay="bannerAutoPlay">
          <el-carousel-item :style="{height:carouselHeight+'px',overflow:'hidden'}">
            <div :ref="`banner-div-0`" style="background: transparent;">
              <img style="width: 100%;" src="@/assets/home/banner1.png" fit="fill" :ref="`banner-img-0`" @load="initDivHeight(0)"/>
            </div>
          </el-carousel-item>
          <el-carousel-item :style="{height:carouselHeight+'px',overflow:'hidden'}">
            <div :ref="`banner-div-1`" style="background: transparent;">
              <img style="width: 100%;" src="@/assets/home/banner2.png" fit="fill" :ref="`banner-img-1`" @load="initDivHeight(1)"/>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="fwxm">
        <div class="fwxm-title">
          <div class="itemtitle-top">
            <div class="line"></div>
            <span class="item-title">服务项目</span>
            <div class="line"></div>
          </div>
          <div class="english">Service Items</div>
        </div>
        <el-row class="service-items">
          <el-col class="service-item" :xs="12" :sm="6">
            <kinesis-container class="flex-column" :duration="200">
              <kinesis-element :strength="10" :originY="0" axis="y" :originX="0"> 
                <img class="service-icon" src="@/assets/home/应用系统开发.png" alt="">
              </kinesis-element>
              <span class="service-title">应用系统开发</span>
              <span class="service-note">桌面应用程序、Web应用程序</span>
            </kinesis-container>
          </el-col>
          <el-col class="service-item" :xs="12" :sm="6">
            <kinesis-container class="flex-column" :duration="200">
              <kinesis-element :strength="10" :originY="0" axis="y" :originX="0"> 
                <img class="service-icon" src="@/assets/home/移动APP定制.png" alt="">
              </kinesis-element>
              <span class="service-title">移动APP定制</span>
             <span class="service-note">Android应用定制、Ios应用定制</span>
             <span class="service-note">Pad应用定制</span>
            </kinesis-container>
            
            
          </el-col>
          <el-col class="service-item" :xs="12" :sm="6">
            <kinesis-container class="flex-column" :duration="200">
              <kinesis-element :strength="10" :originY="0" axis="y" :originX="0"> 
                <img class="service-icon" src="@/assets/home/移动应用定制.png" alt="">
              </kinesis-element>
              <span class="service-title">移动应用定制</span>
             <span class="service-note">H5跨平台开发、微信公众号开发</span>
             <span class="service-note">微信小程序开发</span>
            </kinesis-container>
            
            
          </el-col>
          <el-col class="service-item" :xs="12" :sm="6">
            <kinesis-container class="flex-column" :duration="200">
              <kinesis-element :strength="10" :originY="0" axis="y" :originX="0"> 
                <img class="service-icon" src="@/assets/home/解决方案定制.png" alt="">
              </kinesis-element>
              <span class="service-title">解决方案定制</span>
            <span class="service-note">优化业务流程、破解行业痛点</span>
            <span class="service-note">提升业务效率</span>
            </kinesis-container>
            
            
          </el-col>
        </el-row>
      </div>
      <div class="fwxm fwlc">
        <div class="fwxm-title">
          <div class="itemtitle-top">
            <div class="line"></div>
            <span class="item-title">服务流程</span>
            <div class="line"></div>
          </div>
          <div class="english">Service Process</div>
        </div>
        <div class="service-items">
          <img class="service-fwlc" src="@/assets/home/服务流程.png" alt="">
        </div>
      </div>
      <div class="fwxm dxal">
        <div class="fwxm-title">
          <div class="itemtitle-top">
            <div class="line"></div>
            <span class="item-title">典型案例</span>
            <div class="line"></div>
          </div>
          <div class="english">Typical Case</div>
        </div>
        <div class="dxal-tab">
          <div class="dxalTab-item" v-show="item.data[0]" v-for="(item,index) in types" :key="index" :class="dxalIndex==index+1?'active':''" @click="dxalIndex=index+1">{{ item.name }}</div>
        </div>
        <div class="dxal-items" v-show="dxalIndex==index+1" v-for="(item,index) in types" :key="index">
          <kinesis-container v-for="(child,index) in item.data" :key="index" class="container flex-column" :class="titleType==2?'container2':''">
            <kinesis-element class="containeritem" :strength="titleType==2?0:20">
              <img class="dxal-item" @click="jump(child)" :src="child.cover||''" alt="">
            </kinesis-element>
          </kinesis-container>
        </div>
      </div>
      <div class="fwxm hzhb">
        <div class="fwxm-title">
          <div class="itemtitle-top">
            <div class="line"></div>
            <span class="item-title">合作伙伴</span>
            <div class="line"></div>
          </div>
          <div class="english">Cooperative Partner</div>
        </div>
        <div class="hzhb-items">
          <div class="hzhb-item" v-for="(item,index) in hzhbList" :key="index">
            <div style="display: inline-block" @mouseenter="hzhbIndex=index+1" @mouseleave="hzhbIndex=''">
              <img v-show="hzhbIndex!=index+1" class="hzhb-icon" :src="require('@/assets/home/'+item+'.png')" alt="">
              <img v-show="hzhbIndex==index+1" class="hzhb-icon" :src="require('@/assets/home/'+item+'-蓝.png')" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    components: {
    },
    data(){
      return{
        dxalIndex:1,
        carouselHeight:'200px',
        bannerAutoPlay:true,
        hzhbIndex:'',
        hzhbList:['中国铁路','中国烟草','中国农科院','云大医院','招商银行','西南水泥',],
        types:[],
        titleType:1
      }
    },
    methods:{
      //跳转页面
      jump(child){
        this.$router.push({ name: 'caseDetails', query: { id:child.id }});
      },
      // 注意不能直接在获取到数据后调用此函数，使用nextTick也不行，因为图片会先加载，但是宽高还未计算出来
      calcDivHeight(targetIndex) {
        let targetDivRef = this.$refs[`banner-div-${targetIndex}`]
        this.carouselHeight = targetDivRef.offsetHeight + 'px'
      },
      // 控制banner高度，适应图片
      initDivHeight(index){
        this.calcDivHeight(index);
        this.bannerAutoPlay = true;
      },
      //获取案例分类
      getTypes(){
        this.$apis.baseData.getClazz({pcode:'AL'}).then(res=>{
          this.types=res.data.list||[]
          if(this.types.length){
            for(let item of this.types){
              this.$set(item,'data',[])
              this.getTypesNext(item)
            }
          }
        })
      },
      //获取案例分类下的数据
      getTypesNext(item){
        this.$apis.baseData.getPage({clazzCode:item.code,pageNum: 1, pageSize: this.titleType==2?1:3}).then(res=>{
          item.data=res.data.list||[]
        })
      },
      startWatchingWidth() {
        if(this.$refs.home.offsetWidth&&this.$refs.home.offsetWidth<=768){
          this.titleType=2
        }
    },
    },
    mounted(){
      this.startWatchingWidth()
      this.getTypes()
      this.initDivHeight(1)
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .el-carousel{
    width: 100%;
  }
  .fwxm{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    padding: 0 10px 40px 10px;
    .fwxm-title{
      padding: 30px 0;
      .itemtitle-top{
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
      .line{
        height: 1px;
        background: #000;
        width: 80px;
      }
      .item-title{
        margin: 0 10px;
        font-size: 18px;
        font-weight: bold;
      }
      .english{
        color: $color-main-primary;
      }
    }
    .service-items{
      width: $public-width;
      max-width: 100%;
      .service-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 10px 0;
        .service-icon{
          width: 90px;
          height: auto;
          max-width: 100%;
        }
        .service-title{
          font-size: 18px;
          margin-top: 18px;
        }
        .service-note{
          font-size: 12px;
          margin-top: 6px;
        }
      }
    }
  }
  .fwlc{
    background: #ebebeb;
    
    .service-fwlc{
      height: auto;
      width: 800px;
      max-width: 100%;
      margin: 0 auto;
    }
    img{
      pointer-events: none;
    }
  }
  
  .dxal{
    .dxal-tab{
      display: flex;
      justify-content: space-between;
      width: 500px;
      max-width: 100%;
      margin-bottom: 30px;
      .dxalTab-item{
        width: 100px;
        max-width: 23%;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border: 1px solid #000;
        cursor: pointer;
      }
      .dxalTab-item:hover{
        //animation: move 0.2s linear forwards;
        color:$color-main-primary;
        border: 1px solid $color-main-primary;
      }
      .active{
        background: $color-main-primary;
        color: #fff!important;
      }
    }
    .dxal-items{
      padding: 10px 0;
      display: flex;
      width: $public-width;
      max-height: 300px;
      max-width: 100%;
      justify-content: center;
      .container{
        width: 33.33%;
        display: flex;
        .containeritem{
          flex: 1;
          display: flex;
        }
      }
      .container2{
        width: 100%;
      }
      .dxal-item{
        flex: 1;
        margin: 0 10px;
        height: auto;
        max-height: 300px;
      }
      img{
        cursor: pointer;
      }
    }
  }
  @keyframes move {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-1px);
  }
  100% {
    transform: translateY(-2px);
  }
}
  .hzhb{
    background: #ebebeb;
    display: flex;
    flex-direction: column;
    align-items: center;
    .hzhb-items{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      width: $public-width;
      max-width: 100%;
      .hzhb-item{
        width: 33.33%;
        overflow: hidden;
        padding: 10px 2%;
        img{
          pointer-events: none;
        }
        .hzhb-icon{
          width: 100%;
          height: auto;
        }
      }
    }
  }
  .fwxm-title{
    animation: move-light 15s linear infinite;
  }
  .line{
    animation: scale2 15s linear infinite;
  }
  @keyframes move-light {
    0% { transform: translateX(-300px); opacity: 0.1;}
    1% { transform: translateX(-100px); opacity: 0.3;}
    1.5% { transform: translateX(0);opacity: 0.4; }
    2% { transform: translateX(50px);opacity: 0.6;}
    2.5% { transform: translateX(0); opacity: 1;}
    90% { transform: translateX(0); opacity: 1;}
    96% { transform: rotateZ(0); opacity: 1;}
    100% { transform: rotateZ(360deg); opacity: 0;}
  }
  @keyframes scale2 {
    0% { transform: scaleX(0);opacity: 0.3;}
    10% { transform: scaleX(1);opacity: 1;}
    100% { transform: scaleX(1);opacity: 1;}
  }
  </style>
  